<template>
	<view class="message-box" v-if="visible">
		<view class="mask" @tap="handleCancel"></view>
		<view class="content">
			<view class="title">{{ title }}</view>
			<view class="message">{{ message }}</view>
			<view class="buttons">
				<text 
					class="cancel-btn" 
					:style="{ color: '#999' }"
					@tap="handleCancel"
				>{{ cancelText }}</text>
				<text 
					class="confirm-btn"
					:style="{ color: confirmColor }"
					@tap="handleConfirm"
				>{{ confirmText }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	message: {
		type: String,
		default: ''
	},
	cancelText: {
		type: String,
		default: '取消'
	},
	confirmText: {
		type: String,
		default: '确定'
	},
	confirmColor: {
		type: String,
		default: '#007aff'
	}
})

const emit = defineEmits(['cancel', 'confirm'])

const visible = ref(false)
let resolveCallback = null

// 显示弹窗
const show = () => {
	return new Promise((resolve) => {
		visible.value = true
		resolveCallback = resolve
	})
}

// 隐藏弹窗
const hide = () => {
	visible.value = false
	resolveCallback = null
}

// 取消
const handleCancel = () => {
	hide()
	resolveCallback && resolveCallback(false)
	emit('cancel')
}

// 确认
const handleConfirm = () => {
	hide()
	resolveCallback && resolveCallback(true)
	emit('confirm')
}

// 暴露方法给父组件
defineExpose({
	show,
	hide
})
</script>

<style lang="scss" scoped>
.message-box {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(4px);
	}
	
	.content {
		position: relative;
		width: 560rpx;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		animation: slideIn 0.2s ease-out;
		
		.title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			text-align: center;
			padding: 30rpx;
		}
		
		.message {
			font-size: 28rpx;
			color: #666;
			padding: 0 40rpx 40rpx;
			text-align: center;
		}
		
		.buttons {
			display: flex;
			border-top: 1rpx solid #eee;
			
			text {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				
				&:first-child {
					border-right: 1rpx solid #eee;
				}
				
				&:active {
					opacity: 0.7;
				}
			}
		}
	}
}

@keyframes slideIn {
	from {
		transform: translateY(30rpx);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
</style> 